<template>
  <div>
    <!-- 操作 -->
    <div class="table-operations">
      <a-button type="primary" @click="$emit('add')" v-hasPermi="[permPrefix + 'add']">
        <a-icon type="plus" />新增
      </a-button>
<!--      <a-button type="primary" :disabled="single" @click="$refs.createForm.handleUpdate(undefined, ids)">
        <a-icon type="edit" />修改
      </a-button>-->
      <a-button type="danger" :disabled="multiple" @click="handleDelete" v-hasPermi="[permPrefix + 'remove']">
        <a-icon type="delete" />删除
      </a-button>
      <a-button type="primary" @click="handleExport" v-hasPermi="[permPrefix + 'export']">
        <a-icon type="download" />导出
      </a-button>
      <a-button
        type="dashed"
        shape="circle"
        :style="{float: 'right'}"
        icon="reload" />
    </div>
    <!-- 数据展示 -->
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="dataSource"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :pagination="false">

      <span slot="createTime" slot-scope="text, record">
        {{ parseTime(record.createTime) }}
      </span>
      <span slot="updateTime" slot-scope="text, record">
        {{ parseTime(record.updateTime) }}
      </span>
      <span slot="operation" slot-scope="text, record">
        <a @click="$emit('update', record.id)" v-hasPermi="[permPrefix + 'edit']">
          <a-icon type="edit" />修改
        </a>
        <a-divider type="vertical" v-hasPermi="[permPrefix + 'remove']" />
        <a @click="handleDelete(record)" v-hasPermi="[permPrefix + 'remove']">
          <a-icon type="delete" />删除
        </a>
      </span>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'TableLayout',
  props: {
    permPrefix: {
      type: String,
      require: true
    },
    columnList: {
      type: Array,
      require: true,
      default () {
        return []
      }
    },
    dataSource: {
      type: Array,
      default () {
        return []
      }
    },
    dictData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      selectedRowKeys: [],
      selectedRows: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: []
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
    /* 搜索条件列表 */
    columns () {
      return this.columnList.filter(item => item.listShow === '0').map(item => {
        return {
          title: item.name,
          dataIndex: this.toHump(item.code),
          ellipsis: true,
          align: 'left'
        }
      }).concat([{
        title: '操作',
        dataIndex: 'operation',
        width: '15%',
        scopedSlots: { customRender: 'operation' },
        align: 'center'
      }])
    }
  },
  watch: {
  },
  methods: {
    // 下划线转驼峰式命名
    toHump(name) {
      return name.replace(/_(\w)/g, function(all, letter) {
          return letter.toUpperCase()
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.dictId)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const ids = row.id || this.ids.join(',')
      this.$emit('delete', ids)
    },
    // 导出
    handleExport () {
      this.$emit('export')
    }
  }
}
</script>
